export default {
    data: {
        title: "",
        context1: null,
        context2: null,
        showButton: false,
    },
    onInit() {
        this.title = "Hello World";
    },
    onLoad1() {
        var xcomponent = this.$element('xcomponent1');
        this.context1 = xcomponent.getXComponentContext();
        console.info('surfaceid1: ' + xcomponent.getXComponentSurfaceId());
    },
    onLoad2() {
        var xcomponent = this.$element('xcomponent2');
        this.context2 = xcomponent.getXComponentContext();
        console.info('surfaceid2: ' + xcomponent.getXComponentSurfaceId());
    },
    onDestroy1() {
        console.info("onDestroy1");
    },
    onDestroy2() {
        console.info("onDestroy2");
    },
    changeColor1() {
        this.context1.changeColor();
    },
    changeShape1() {
        this.context1.changeShape();
    },
    changeSize1() {
        var xcomponent = this.$element('xcomponent1');
        xcomponent.setXComponentSurfaceSize({surfaceHeight:600, surfaceWidth:600})
        console.info('changesize1');
    },
    changeColor2() {
        this.context2.changeColor();
    },
    changeShape2() {
        this.context2.changeShape();
    },
    changeSize2() {
        var xcomponent = this.$element('xcomponent2');
        xcomponent.setXComponentSurfaceSize({surfaceHeight:400, surfaceWidth:400})
        console.info('changesize2');
    },
    changeShow() {
        this.showButton = ~this.showButton;
    }
}
